<template>
  <div class="box">
    <headers title="首页"></headers>
    <search></search>
    <van-tabs v-model:active="active">
      <van-tab title="标签 1">
        <swiper :images="images"></swiper>
        <div class="main">
          <van-grid>
            <van-grid-item
              v-for="(v, i) in list"
              :key="i"
              :icon="v.image_src"
              :text="v.name"
            />
            <van-grid-item
              v-for="(v, i) in list"
              :key="i"
              :icon="v.image_src"
              :text="v.name"
            />
          </van-grid>
        </div>
        <div class="item">
          <van-grid :border="false" :column-num="2">
            <van-grid-item v-for="(v, i) in list1" :key="i" :style="i%2==0?{ height:'22rem'}:{height:'29rem'} ">
              <van-image
                :src="
                  v.goods_small_logo
                    ? v.goods_small_logo
                    : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'
                "
              />
              <div>{{ v.goods_name }}</div>
            </van-grid-item>
          </van-grid>
          
        </div>
      </van-tab>
      <van-tab title="标签 2">内容 2</van-tab>
      <van-tab title="标签 3">内容 3</van-tab>
      <van-tab title="标签 4">内容 4</van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { catitemsApi } from "@/api/api";
import { swiperdataApi } from "@/api/api";
import { searchApi } from "@/api/api";
import swiper from "@/components/swiper.vue";
import headers from "@/components/header.vue";
import search from "@/components/search.vue";
const list = ref([]);
const list1=ref([])
const images = ref([]);

const swiperFun = () => {
  swiperdataApi().then((res) => {
    images.value = res.data.message;
  });
};
swiperFun();

const catFun = () => {
  catitemsApi().then((res) => {
    list.value = res.data.message;
  });
};
catFun();

const searchFun=()=>{
    searchApi().then((res)=>{
        list1.value=res.data.message.goods;
    })
}
searchFun();
</script>

<style lang="scss" scoped></style>
